Image mouse-over with dropdown menu

[justinsrx7]

I am trying to find if there is a way, using CSS/HTML, to code a simple single drop-down menu that is activated when you mouse-over an image. For example, in windows, you can right mouse click an icon on the desktop and get a drop down menu to appear. I would like to do the same thing on a website except without having to mouse click, so when you mouse over an image, the menu drops down.

[drhowarddrfine]

There are some interesting css3 things that I've only touched on and am experimenting with when I find time. One uses :target to highlight another element and make other elements appear or not when hovering over another. I don't think it can make a drop down list appear but I haven't tried it either.

The downside to that is it only works in modern browsers and not IE. So the only alternative would be javascript.

[jimberry]

Try the menu examples and tutorials at alistapart

[tburger]

I thought this looked interesting, so I tried to code something up quickly.

Here's what I got:

Test Image-Over Menu

If you open this in Firefox (the javascript is slightly different to work properly in IE6), you will see a picture of a guitar. If you mouse over the image, a menu will pop up - similar to the action of right clicking in windows...

The trick to this is something I picked up while learning about the Navigation Matrix approach to menu styling. We can essentially make an image act as a link by hiding the actual anchor <a> below it. This is done by making the height of the anchor 0, setting the anchor's background to a certain image, and then adjusting the anchor's upper padding.

a { 
height: 0px;
background-image: xx; 
background-repeat:no-repeat;
width: xx (where xx is width of picture);
padding-top: xx (where xx is height of picture);
overflow: hidden;
 

This will make the actual link invisible to the user, but will have created a box that acts as a link around the image.

From there, I used a short script to hide/show the menu when moused over.

Feel free to check out the code:

JScript

CSS

Although I have since modified the script, thanks to Raphaël GOETTER
at alsacreations.com for the basic model...

Hope this helps, let me know if you have questions

Tom